/* eslint-disable import/first */
import React from 'react';
import { connect } from 'dva';
import {
  Form, Input, Icon,
  Slider, Button,
} from 'antd';
import MyStyle from './NewUser.css';

const FormItem = Form.Item;

class FormUser extends React.Component {
  insertUser = (values) => {
    this.props.dispatch({ type: 'mydemo/insertUser', payload: values });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      // 校验通过
      if (!err) {
        const {
          userId = null,
          userName = null,
          userAge = null,
          userUpdateTime = null,
        } = values;

        const user = {
          id: userId,
          name: userName,
          age: userAge,
          updateTime: userUpdateTime,
        };
        this.insertUser(user);
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
          label="编号"
          className={MyStyle.hide}
        >
          {getFieldDecorator('userId')(
            <Input disabled />,
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="姓名"
        >
          {getFieldDecorator('userName', { rules: [{ required: true }] })(
            <Input
              placeholder="Enter your userName"
              prefix={<Icon type="user" />}
            />,
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="年龄"
        >
          {getFieldDecorator('userAge')(
            <Slider marks={{ 0: '0', 20: '20', 40: '40', 60: '60', 80: '80', 100: '100' }} />,
          )}
        </FormItem>

        <FormItem
          wrapperCol={{ span: 12, offset: 6 }}
        >
          <Button type="primary" htmlType="submit">Submit</Button>
        </FormItem>
      </Form>
    );
  }
}

const NewUser = Form.create()(FormUser);

export default connect()(NewUser);
